<template>
  <view class="banner-model">
    <swiper class="banner" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular='true' @change="onBannerChange">
      <swiper-item v-for="item in this.internalBannerList" :key="item.id">
        <image class="banner-img" :src=" 'https://iepsy.oss-cn-beijing.aliyuncs.com/'+item" mode="aspectFill" @error="handleImageError($event, item)"></image>
      </swiper-item>
    </swiper>
    <!-- 自定义轮播指示器 -->
    <view class="swiper-indicator">
      <view v-for="(item, index) in this.internalBannerList" :key="index"
        :class="['swiper-indicator-item', { 'swiper-indicator-active': currentBannerIndex === index }]">
      </view>
    </view>
  </view>
</template>

<script>
import { logout } from '../../api/api';

export default {
  name: 'banner',
  props: {
    bannerList: {
      type: Array,
      default: () => []
    },

  },
  data() {
    return {
      // 内部安全的banner列表，用于处理异常情况
      internalBannerList: [],
      currentBannerIndex: 0
    }
  },
  computed: {
  },
  watch: {
    bannerList: {
      handler(newVal) {
        // 监听bannerList变化，更新内部列表
        // 确保newVal是可迭代对象，否则使用空数组
        this.internalBannerList = this.bannerList;
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 处理图片加载失败的情况
    // 轮播图变化事件，更新当前指示点
    onBannerChange(e) {
      this.currentBannerIndex = e.detail.current;
    }
  }
}
</script>

<style scoped>
.banner-model {
  width: 750rpx;
  height: 465rpx;
  position: relative;
}

.banner {
  width: 750rpx;
  height: 470rpx;
  display: inline-block;
  overflow: hidden;
}

.banner .banner-img {
  width: 100%;
  /* height: 100%; */
}

/* 自定义轮播指示器样式 */
.swiper-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 105rpx;
  width: 100%;
  z-index: 10;
}

.swiper-indicator-item {
  width: 12rpx;
  height: 12rpx;
  border-radius: 6rpx;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 6rpx;
  display: inline-block;
  transition: all 0.3s ease;
}

.swiper-indicator-active {
  width: 30rpx;
  background-color: white;
}
</style>